<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-23 17:02:54
 * @LastEditTime: 2025-01-26 17:25:01
 * @FilePath: /env-manager-pc/src/views/log/index.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import mySelect from './mySelect.vue'
import { useEnvOrgs, useOwnerOrgs } from '@/utils/dataHook'
import { usePage } from '@/utils/commonHook'
import entApi from '@/api/modules/ent'

const tableData = ref([])
const loading = ref()
const envOrgs = useEnvOrgs()
const OwnerList = useOwnerOrgs()

const defaultProps = {
  children: 'Children',
  label: 'Name',
}
const formData = reactive({
  OwnerOrg: '',
  Enterprise: '',
  EnvOrg: '',

})

const searchData: any = computed(() => {
  return [{
    ObjTypeKey: 'OwnerOrg',
    Filter: {
      Type: 'DIM.OwnerOrgs.GUIDFilter',
      FilterKey: null,
      Value: [
        formData.OwnerOrg,
      ],
    },
  },
  {
    ObjTypeKey: 'Enterprise',
    Filter: {
      Type: 'DIM.Units.Filters.NameFilter',
      FilterKey: null,
      Value: [
        formData.Enterprise,
      ],
    },
  },
  {
    ObjTypeKey: 'EnvOrg',
    Filter: {
      Type: 'DIM.Business.Envs.EnvOrgFilters.GUIDFilter',
      FilterKey: null,
      Value: [
        formData.OwnerOrg,
      ],
    },
  }]
})

interface TimeRangeType {
  startTime: string | null
  endTime: string | null
}

const timeRange = reactive<TimeRangeType>({
  startTime: dayjs().subtract(7, 'day').format('YYYYMMDD'),
  endTime: dayjs().add(1, 'day').format('YYYYMMDD'),
})

const tiemValue = computed({
  set: (values) => {
    const realValues = values || []
    timeRange.startTime = realValues[0]
    timeRange.endTime = realValues[1]
  },
  get: () => {
    return [timeRange.startTime, timeRange.endTime]
  },
})

const { page, pageNumChange, pageSizeChange } = usePage(getTableData)
const logTypes = ref<any>([])

async function getTableData() {
  loading.value = true
  const res = await entApi.GetLogs({
    filters: searchData.value,
    logTypes: logTypes.value,
    pageSize: page.PageSize,
    pageNum: page.PageNum,
    startTime: timeRange.startTime,
    endTime: timeRange.endTime,
  })
  loading.value = false
  const { Rows, RecordsetCount } = res
  tableData.value = Rows || []
  page.RecordsetCount = RecordsetCount
}

function search() {
  page.PageNum = 1
  getTableData()
}

getTableData()
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="管理机构">
                <el-tree-select
                  v-model="formData.EnvOrg"
                  value-key="Code"
                  :data="envOrgs"

                  :render-after-expand="false"
                  :props="defaultProps"
                  clearable check-strictly
                  class="w-full"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="企业名称">
                <ElInput v-model="formData.Enterprise" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="运维公司">
                <el-tree-select
                  v-model="formData.OwnerOrg"
                  value-key="Code"
                  :data="OwnerList"
                  check-strictly
                  :render-after-expand="false"
                  :props="defaultProps"
                  clearable
                  class="w-full"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="日期">
                <ElDatePicker v-model="tiemValue" value-format="YYYYMMDD" type="daterange" :clearable="false" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="日志类型">
                <mySelect v-model="logTypes" class="w-full" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6" :push="12" class="flex flex-justify-end">
              <ElButton type="primary" @click="search">
                查询
              </ElButton>
              <ElButton type="warning">
                导出
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          auto-resize border
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn type="seq" title="序号" width="90" />
          <VxeColumn field="EnvOrgName" title="管理机构" min-width="220" />
          <VxeColumn field="OwnerOrgName" title="运维公司" min-width="220" />
          <VxeColumn field="EntName" title="企业名称" min-width="220" />
          <VxeColumn field="date" title="相关对象" width="180">
            <template #default="{ row }">
              {{ row?.Objs?.reduce((str:string, item:any) => {
                str = `${str ? `${str},` : ''}${item.ObjName}`
                return str
              }, '') }}
            </template>
          </VxeColumn>
          <VxeColumn field="HappenTime" title="发生时间" width="180" />
          <VxeColumn field="LogTypeName" title="日志类型" width="150" />
          <VxeColumn field="AccountName" title="账号名称" width="120" />
          <VxeColumn field="Describe" title="日志描述" width="180" />
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
  </div>
</template>
